<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ti-ket - Paiement de commande</title>
<!-- CSS - Initialisation des éléments html -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css" />

<link href="css/main.css" type="text/css" rel="stylesheet" />
<link href="css/confirmation.css" type="text/css" rel="stylesheet" />

<!-- ****************     CSS et JS pour utiliser le jScrollPane     **************** -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jquery.jscrollpane.js"></script>
<script type="text/javascript">
	$(function(){
		$('#content').jScrollPane();
	});
</script>
<!-- ************************************************************************************* -->
</head>

<body>
<div id="global">
	<!-- ****************     DEBUT EN-TÊTE     **************** -->
	<div id="header">
    		<div class="logo">Ti-Ket</div>
           <div class="search_wrapper">
           		<div class="label">Recherchez des spectacles </div>
                <form id="search_form" name="search_form" action="#">
                    <input type="text" name="search_input" class="search_input" id="search_input" value="Artiste, Spectacle, Catégorie" />
                    <input type="submit" name="search_btn" class="search_btn" id="search_btn" />
                </form>
            </div>
        <div class="categories">
        	<ul>
            	<li><a href="#">Musique</a></li>
                <li><a href="#">Sport</a></li>
                <li><a href="#">Humour</a></li>
                <li><a href="#">Famille</a></li>
                <li><a href="#">Salle</a></li>
                <li><a href="#">Calendrier</a></li>
            </ul>
        </div>
    </div>
	<!-- ****************     FIN EN-TÊTE     **************** -->
    
	<!-- ****************     DEBUT CORP DE PAGE     **************** -->
    <div id="body">
    	
        <div id="content">
        	<div id="paiement_nav">
                <ul>
                    <li><a href="#">Informations</a></li>
                    <li><a href="#">Confirmation</a></li>
                    <li class="selected"><a href="#">Paiement</a></li>
                </ul>
            </div>
        	<div id="confirmation">
                <div class="confirmation_wrapper"> 
                	              
                    <form action="#" name="confirmation_form">
                    <h1>Confirmation de paiement</h1>
                    <div class="message">Le paiement à réussi. Merci.<br /> Voici votre numéro de confirmation correspondant à la commande ci-dessous :<br />
                    A3G71892KA6</div> 
                    <table class="confirmation_table" width="700" border="0" cellspacing="0" cellpadding="0">
                      <tr class="top">
                        <td>Billets</td>
                        <td>Spectacle</td>
                        <td>Date</td>
                      </tr>
                      <tr>
                        <td>2 billets</td>
                        <td>Circle Du Soleil - Royaume</td>
                        <td>23 juin 2012</td>
                      </tr>
                      <tr>
                        <td>4 billets</td>
                        <td>Mario Jean</td>
                        <td>5 avril 2012</td>
                      </tr>
                    </table>
                  </form>
                </div>
            </div>
        </div>
    </div>
	<!-- ****************     FIN CORP DE PAGE     **************** -->
    
	<!-- ****************     DEBUT PIED DE PAGE    **************** -->
    <div id="footer">&nbsp;</div>    
	<!-- ****************     FIN PIED DE PAGE     **************** -->
</div>
</body>
</html>
